// subpkg/goods_detail/goods_detail.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {
    store
} from '../../store/store.js'
import {
    request as axios
} from '../../util/request/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        goods_id: 0,
        goods_detail: {},
        urls: [],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            goods_id: options.goods_id
        })
        this.getGoodsDetail()
        // 加载
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: ['cart','total'],
            actions: ['addToCart','saveToStorage']
          })
      
    },
    async getGoodsDetail() {
        const {
            data: res
        } = await axios('GET', '/goods/detail', {
            goods_id: this.data.goods_id
        })
        if (res.meta.status !== 200) wx.showToast({
            title: '数据加载失败',
            icon: 'none'
        })
        // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
        this.setData({
            goods_detail: res.message
        })
    },
    // 跳转购物车
    gotoShop() {
        wx.switchTab({
            url: '/pages/cart/cart',
        })
    },
    // 跳转客服页面
    gotoCustomer(){
        wx.navigateTo({
          url: '/subpkg/customer/customer',
        })
    },
    preview(e) {
        let i = e.currentTarget.dataset.index
        wx.previewImage({
            current: i,
            indicator: 'number',
            urls: this.data.goods_detail.pics.map(x => x.pics_big)
        })
    },
    buttonClick(){
         // 2. 组织一个商品的信息对象
         const goods = {
            goods_id: this.data.goods_detail.goods_id, // 商品的Id
            goods_name: this.data.goods_detail.goods_name, // 商品的名称
            goods_price: this.data.goods_detail.goods_price, // 商品的价格
            goods_count: 1, // 商品的数量
            goods_small_logo: this.data.goods_detail.goods_small_logo, // 商品的图片
            goods_state: true // 商品的勾选状态
          }
          wx.showToast({
            title: '成功加入购物车',
          })
          // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中
          this.addToCart(goods)
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        this.storeBindings.destroyStoreBindings()
      },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})